<template>
  <div class="order">
    <van-tabs color="#008fef" v-model="tabsAvtive" @click="onClick">
      <van-tab v-for="type in types" :key="type.id" :title="type.name"></van-tab>
    </van-tabs>

    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-if="orders.length > 0">
        <OrderWrap
          v-for="(item, index) in orders"
          type="list"
          :key="index"
          :wrap="item"
          @reload="handleReload"
        />
      </template>
      <template v-else>
        <div class="empty-wrap" v-if="isLoad">
          <EmptyTips :image="NoTicketEmpty" mWidth="30" mHeight="30" text="当前分类无记录"/>
        </div>
      </template>
    </van-list>
  </div>
</template>

<script>
import api from "../../api";
import common from "../../api/common";
import EmptyTips from "@/components/common/EmptyTips";
import OrderWrap from "@/components/order/OrderWrap";
import NoTicketEmpty from "../../assets/common/no-ticket-empty.png";
var onLoadTimer = null;

export default {
  title: "我的订单",
  bodyClass: "gray-bg",
  components: { OrderWrap, EmptyTips },
  data() {
    return {
      NoTicketEmpty,
      status: common.getParam("active"),
      uid: this.$store.state.uid,
      page: 1,
      tabsAvtive: common.getParam("active"),
      loading: false,
      finished: false,
      page: 1,
      isLoad: false,
      types: [
        {
          name: "全部",
          id: 0
        },
        {
          name: "待配送",
          id: 1
        },
        {
          name: "已取消",
          id: 2
        },
        {
          name: "已完成",
          id: 3
        }
      ],
      orders: []
    };
  },
  methods: {
    onClick(index, title) {
      this.status = index;
      console.log(this.status);
      this.clearList();

      this.onLoad();
    },
    clearList() {
      this.orders = [];
      this.page = 1;
    },
    onLoad() {
      window.clearTimeout(onLoadTimer);
      onLoadTimer = window.setTimeout(() => {
        api.order.getOrderList(
          this.uid,
          this.page,
          this.status,
          res => {
            console.log(res);
            this.isLoad = true;
            if (res.pager.totalPages <= res.pager.nowPage) {
              this.loading = false;
              this.finished = true;
            }

            if (res.list.length < 1) {
              this.finished = true;
            }

            for (var i = 0; i < res.list.length; i++) {
              this.orders.push(res.list[i]);
            }
            this.page += 1;
            this.loading = false;
          },
          res => {
            this.loading = false;
            this.finished = true;
            this.$toast(res.msg);
          }
        );
      }, 200);
    },
    handleReload() {
      this.clearList()
      this.onLoad()
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
</style>